<template>
    <div>
         <div id="location-chose">
             <div class="search">
                 <div class="search-textbox">
                     <div class="textbox-locate">福州</div>
                     <input class="text-input" type="text" placeholder="搜索职位、公司" id="sText"
                      value="">
                     <div class="prosession-type"
                      @mouseover="showJob()">
                         <span>职位类型</span>
                         <img src="../assets/profession/三角形.png" alt="">
                     </div>
                 </div>
                 <div class="search-btn" @click="search()">搜索</div>
                 <div class="job-type-btn-hover-box" :class="{hiding:show == false}" @mouseout="hideJob()"
                 @mouseover="showJob()">
                     <div class="hover-left inline hovers">
                         <div :class="{jobtypeclick:jobClick1 == 1}" @click="jc(1),jobTypeTextChange('不限',0)">不限</div>
                         <div :class="{jobtypeclick:jobClick1 == 2}" @click="jc(2),jobTypeTextChange('前端',1)">前端</div>
                         <div :class="{jobtypeclick:jobClick1 == 3}" @click="jc(3),jobTypeTextChange('实习',2)">实习</div>
                         <div :class="{jobtypeclick:jobClick1 == 4}" @click="jc(4),jobTypeTextChange('全职',3)">全职</div>
                     </div>
                     <!-- <div class="hover-right inline hovers">
                         <div :class="{jobtypeclick:jobClick2 == 1}" @click="jc2(1)">Java</div>
                         <div :class="{jobtypeclick:jobClick2 == 2}" @click="jc2(2)">iOS</div>
                         <div :class="{jobtypeclick:jobClick2 == 3}" @click="jc2(3)">android</div>
                         <div :class="{jobtypeclick:jobClick2 == 4}" @click="jc2(4)">html5</div>
                     </div> -->
                 </div>
             </div>
             <div id="type-change">
                 <div class="hope-city">
                    <p class="hope">意向城市:</p>
                    <p class="city">福州</p>
                    <img src="../assets/profession/右.png" alt="">
                    <span class="areachose">{{areaname}}</span>
                 </div>
                 <div class="area">
                     <ul>
                         <li v-for="(area,index) in areaList" :key="area"
                         @click="areaChange(index,area)"
                         :class="{areaActive:areaIndex==index}">
                             {{area}}
                         </li>
                         <!-- <li class="disabled">永泰县</li>
                         <li class="disabled">罗源县</li> -->
                     </ul>
                 </div>
                 <div>
                     <div class="prosession-character">
                        <p @mouseover="showListOfJob(0)" :class="{jobHoverChose:jobTypeText != '职位性质'}">
                            {{jobTypeText}}
                        </p>
                         <img src="../assets/profession/三角形.png" alt="">
                         <div class="job-hover-list" @mouseout="hideListOfJob(0)" @mouseover="showListOfJob(0)"
                         :class="{jobhoverlistshow:jobListIndex==0,scroller:jobType.length>8}">
                             <div v-for="(t,index) in jobType" :key="t" @click="jobTypeTextChange(t,index)">
                                 {{t}}
                             </div>
                         </div>
                     </div>
                     <div class="prosession-character">
                         <p @mouseover="showListOfJob(1)" :class="{jobHoverChose:jobExceperienceText != '工作经验'}">
                             {{jobExceperienceText}}
                        </p>
                         <img src="../assets/profession/三角形.png" alt="">
                         <div class="job-hover-list" @mouseover="showListOfJob(1)" @mouseout="hideListOfJob(1)"
                         :class="{jobhoverlistshow:jobListIndex==1,scroller:jobExceperience.length>8}">
                             <div v-for="(t,index) in jobExceperience" :key="t" @click="jobExceperienceTextChange(t,index)">
                                 {{t}}
                             </div>
                         </div>
                     </div>
                     <div class="prosession-character">
                         <p @mouseover="showListOfJob(2)" :class="{jobHoverChose:jobEducationText != '学历要求'}">{{jobEducationText}}</p>
                         <img src="../assets/profession/三角形.png" alt="">
                         <div class="job-hover-list" @mouseover="showListOfJob(2)" @mouseout="hideListOfJob(2)"
                         :class="{jobhoverlistshow:jobListIndex==2,scroller:jobEducation.length>8}">
                             <div v-for="(t,index) in jobEducation" :key="t" @click="jobEducationTextChange(t,index)">
                                 {{t}}
                             </div>
                         </div>
                     </div>
                     <div class="prosession-character">
                         <p @mouseover="showListOfJob(3)" :class="{jobHoverChose:jobSalaryText != '薪资要求'}">{{jobSalaryText}}</p>
                         <img src="../assets/profession/三角形.png" alt="">
                         <div class="job-hover-list" @mouseover="showListOfJob(3)" @mouseout="hideListOfJob(3)"
                         :class="{jobhoverlistshow:jobListIndex==3,scroller:jobSalary.length>8}">
                             <div v-for="(t,index) in jobSalary" :key="t" @click="jobSalaryTextChange(t,index)">
                                 {{t}}
                             </div>
                         </div>
                     </div>
                     <div class="prosession-character">
                         <p @mouseover="showListOfJob(4)" :class="{jobHoverChose:jobEnvestText != '融资阶段'}">{{jobEnvestText}}</p>
                         <img src="../assets/profession/三角形.png" alt="">
                         <div class="job-hover-list" @mouseover="showListOfJob(4)" @mouseout="hideListOfJob(4)"
                         :class="{jobhoverlistshow:jobListIndex==4,scroller:jobEnvest.length>8}">
                             <div v-for="(t,index) in jobEnvest" :key="t" @click="jobEnvestTextChange(t,index)">
                                 {{t}}
                             </div>
                         </div>
                     </div>
                     <div class="prosession-character">
                         <p @mouseover="showListOfJob(5)" :class="{jobHoverChose:jobTimeText != '发布时间'}">{{jobTimeText}}</p>
                         <img src="../assets/profession/三角形.png" alt="">
                         <div class="job-hover-list" @mouseover="showListOfJob(5)" @mouseout="hideListOfJob(5)"
                         :class="{jobhoverlistshow:jobListIndex==5,scroller:jobTime.length>8}">
                             <div v-for="(t,index) in jobTime" :key="t"  @click="jobTimeTextChange(t,index)">
                                 {{t}}
                             </div>
                         </div>
                     </div>
                     <div class="clean-chose">
                         <p @click="cleanChose()">清空筛选条件</p>
                     </div>
                 </div>
             </div>
         </div>
         <div>
             <!-- <router-view :checkdata="checkData"></router-view> -->
             <professionList :checkdata="checkdata"/>
         </div>
    </div>
</template>
<script>
import professionList from './profession/professionList.vue'
import moment from "moment"
export default {
    name:'profession',
    components:{
        'professionList':professionList
    },
    data() {
        return {
            jobClick1:0,
            jobClick2:0,
            show:false,
            areaIndex:0,
            areaname:'',
            jobListIndex:-1,
            jobTypeText:'职位性质',
            jobExceperienceText:'工作经验',
            jobEducationText:'学历要求',
            jobSalaryText:'薪资要求',
            jobEnvestText:'融资阶段',
            jobTimeText:'发布时间',
            areaList:[
                "不限","仓山区","鼓楼区","台江区","马尾区","晋安区",
                "闽侯县","连江县","闽清县","平潭县","福清市","长乐市",
                "永泰县","罗源县"
            ],
            jobType:["不限","全职","兼职","实习"],
            jobExceperience:[
                "经验不限","在校生","应届生一年以内","1-3年",
                "3-5年","5-10年","10年以上"
            ],
            jobEducation:[
                "学历不限","初中及以下","中专/专技","高中","大专",
                "本科(非全日制)","本科(全日制)","硕士(非全日制)","硕士(全日制)","博士"
            ],
            jobSalary:[
                "薪资不限","0-3K","3-5K","5-10K",
                "10-20K","20-50K","50-以上K"
            ],
            jobEnvest:[
                "不限","未融资","A轮","B轮",
                "C轮","D轮以上","已上市","不需要融资"
            ],
            jobTime:["不限","十天内","二十天内","一个月内","三个月内","半年内"],
            checkdata:{
                areaId: null,
                beginDate: null,
                eduId: null,
                endDate: null,
                expId: null,
                financeId: null,
                salaryMax: null,
                salaryMin: null,
                type: null,
                poiName: null,
            },
            searchkey:null
        }
    },
    created() {
        this.searchkey = this.$route.query.searchkey;
        this.checkdata.poiName = this.searchkey;
    },
    mounted() {
        this.checkdata.poiName = this.searchkey;
        document.querySelector("#sText").value = this.searchkey
    },
    methods: {
        search(){
            this.checkdata.poiName = document.querySelector("#sText").value
        },
        jc(index){
            this.jobClick1 = index;
        },
        jc2(index){
            this.jobClick2 = index;
        },
        showJob(){
            this.show = true;
        },
        hideJob(){
            this.show = false;
        },
        areaChange(index,area){
            this.areaIndex = index;
            this.areaname = area;
            switch(area){
                case '不限':
                    this.checkdata.areaId = null;
                    break;
                case '仓山区':
                    this.checkdata.areaId = '350104';
                    break;
                case '鼓楼区':
                    this.checkdata.areaId = '350102';
                    break;
                case '台江区':
                    this.checkdata.areaId = '350103';
                    break;
                case '马尾区':
                    this.checkdata.areaId = '350105';
                    break;
                case '晋安区':
                    this.checkdata.areaId = '350111';
                    break;
                case '闽侯县':
                    this.checkdata.areaId = '350121';
                    break;
                case '长乐市':
                    this.checkdata.areaId = '350112';
                    break;
                default:
                    this.checkdata.areaId = '111';
                    break;
            }
            if(this.checkdata.areaId == '111'){
                //指定跳转地址
                // this.$router.replace('/profession/pempty');
            }
            else{
                // this.$router.replace('/profession/professionList');
            }
        },
        showListOfJob(index){
            this.jobListIndex = index;
        },
        hideListOfJob(index){
            this.jobListIndex = -1;
        },
        jobTypeTextChange(t,index){
            if(t === "不限"){
                this.jobTypeText = '职位性质';
                this.checkdata.type = 0
            }else{
                this.jobTypeText = t;
                this.checkdata.type = index
            }
        },
        jobExceperienceTextChange(t,index){
            if(t === "经验不限"){
                this.jobExceperienceText = '工作经验';
                this.checkdata.expId = 1;
            }else{
                this.jobExceperienceText = t;
                this.checkdata.expId = index+1;
            }
        },
        jobEducationTextChange(t,index){
            if(t === "学历不限"){
                this.jobEducationText = '学历要求';
                this.checkdata.eduId = 1;
            }else{
                this.jobEducationText = t;
                this.checkdata.eduId = index + 1;
            }
        },
        jobSalaryTextChange(t,index){
            if(t === "薪资不限"){
                this.jobSalaryText = '薪资要求';
                this.checkdata.salaryMax = null;
                this.checkdata.salaryMin = null;
            }else{
                this.jobSalaryText = t;
                switch(index){
                    case 1:
                        this.checkdata.salaryMax = 3;
                        this.checkdata.salaryMin = 0;
                        break;
                    case 2:
                        this.checkdata.salaryMax = 5;
                        this.checkdata.salaryMin = 3;
                        break;
                    case 3:
                        this.checkdata.salaryMax = 10;
                        this.checkdata.salaryMin = 5;
                        break;
                    case 4:
                        this.checkdata.salaryMax = 20;
                        this.checkdata.salaryMin = 10;
                        break;
                    case 5:
                        this.checkdata.salaryMax = 50;
                        this.checkdata.salaryMin = 20;
                        break;
                    case 6:
                        this.checkdata.salaryMax = null;
                        this.checkdata.salaryMin = 50;
                        break;
                }
            }
        },
        jobEnvestTextChange(t,index){
            if(t === "不限"){
                this.jobEnvestText = '融资阶段';
                this.checkdata.financeId = 0
            }else{
                this.jobEnvestText = t;
                this.checkdata.financeId = index;
            }
        },
        jobTimeTextChange(t,index){
            console.log(t)
            // 点击后改变显示
            if(t === "不限"){
                this.jobTimeText = '发布时间';
            }else{
                this.jobTimeText = t;
            }
            
            this.checkdata.endDate = moment().format('YYYY-MM-DD');
            switch(t){
                case '十天内':
                    this.checkdata.beginDate = moment().subtract(10, 'days').format('YYYY-MM-DD');
                    break;
                case '二十天内':
                    this.checkdata.beginDate = moment().subtract(20, 'days').format('YYYY-MM-DD');
                    break;
                case '一个月内':
                    this.checkdata.beginDate = moment().subtract(1, "months").format("YYYY-MM-DD");
                    break;
                case '三个月内':
                    this.checkdata.beginDate = moment().subtract(3, "months").format("YYYY-MM-DD")
                    break;
                case '半年内':
                    this.checkdata.beginDate = moment().subtract(0.5, "years").format("YYYY-MM-DD")
                    break;
                default:
                    this.checkdata.beginDate = null;
                    this.checkdata.endDate = null;
                    break;
            }
        },
        cleanChose(){
            this.jobTypeText='职位性质';
            this.jobExceperienceText='工作经验';
            this.jobEducationText='学历要求';
            this.jobSalaryText='薪资要求';
            this.jobEnvestText='融资阶段';
            this.jobTimeText='发布时间';
        }
    }
}
</script>
<style>
#location-chose{
    /* 上边阴影 */
    box-shadow:inset 0px 15px 10px -15px rgb(184, 182, 182); 
    width: 1920px;
}

#location-chose .search{
    width: 884px;
    height: 50px;
    padding-top: 28px;
    margin-left: 384px;
    position: relative;
}

.job-type-btn-hover-box{
    position: absolute;
    background-color: white;
    width: 252px;
    height: 168px;
    z-index: 1000;
    color: #99A0AB;
    left: 618px;
}

.hovers{
    border: 1px solid #bfc1c5;
    box-sizing: border-box;
}

.hovers div{
    width: 124px;
    height: 42px;
    text-align: center;
    line-height: 42px;
}

.jobtypeclick{
    background-color: #F2F3F6;
}

#location-chose .search-textbox{
    width: 744px;
    height: 50px;
    border: 1px solid #CCCCCC;
    display: inline-block;
    box-sizing: border-box;
    /* 解决div并排错位 */
    vertical-align:top;
}

#location-chose .search-textbox:hover{
    border: 1px solid #2357FF;
}

.search-textbox-active{
    border: 1px solid #2357FF;
}

#location-chose .search-btn{
    width: 140px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    background-color: #2357FF;
    color: white;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

#location-chose .search-textbox .textbox-locate{
    width: 29px;
    height: 26px;
    border-right: 1px solid #F2F2F5;
    line-height: 26px;
    padding: 0 36px 0 24px;
    font-size: 14px;
    color: #646A7E;
    margin-top: 15px;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

#location-chose .search-textbox .text-input{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    font-size: 16px;
    color:#9FA3AF;
    margin-left: 24px;
    font-size: 16px;
    border:none;
    outline: none;
    margin-top: 14px;
    line-height: 22px;
    width: 395px;
}

#location-chose .search-textbox .prosession-type{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    width: 125px;
    height: 24px;
    color: #646A7E;
    font-size: 14px;
    border-left: 1px solid #F2F2F5;
    box-sizing: border-box;
    position: relative;
    float:right;
    padding-left: 17px;
    margin-top: 13px;
}

#location-chose .search-textbox .prosession-type span{
    display: inline-block;
}

#location-chose .search-textbox .prosession-type img{
    width: 10px;
    float: right;
    position: absolute;
    left: 102px;
    top: 6px;
}

#type-change{
    width: 1184px;
    margin: 0 auto;
    margin-top: 16px;
    box-sizing: border-box;
}

#type-change .hope-city .hope{
    color: #273B4E;
    font-size: 12px;
    display: inline-block;
    margin-right: 16px;
}

#type-change .hope-city,.area{
    position: relative;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEF0F5;
    padding-top: 16px;
}

#type-change .hope-city .hope{
    font-weight: bold;
}

#type-change .hope-city .city{
    color: #1958FB;
    font-size: 12px;
    display: inline-block;
}

#type-change .hope-city img{
    width: 16px;
    position: absolute;
    top: 20px;
    left: 110px;
}

#type-change .hope-city .areachose{
    margin-left: 48px;
    color: #1958FB;
    font-size: 12px;
}

#type-change .area .areaActive{
    display: inline-block;
    color: #1958FB;
    font-size: 12px;
}

#type-change .area li{
    color: #646A7E;
    font-size: 12px;
    margin-right: 24px;
}

/* 不可点击的区 */
#type-change .area .disabled{
    color: #99A0AB;
}

.prosession-character{
    width: 126px;
    height: 44px;
    line-height: 44px;
    position: relative;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    margin-right: 36px;
}

.prosession-character p{
    display: inline-block;
    color: #646A7E;
    font-size: 12px;
    margin-right: 28px;
}

.prosession-character img{
    width: 10px;
    float: right;
    position: absolute;
    top: 18px;
}

.prosession-character .job-hover-list{
    z-index: 2000;
    background-color: white;
    width: 150px;
    border: 1px solid #E3E7ED;
    position: absolute;
    box-sizing: border-box;
    display: none;
}

.scroller{
    /* 滚动条 */
    height:338px;
    overflow:auto;
}

.prosession-character .job-hover-list div:hover{
    background-color: #F2F3F6;
}

.jobhoverlistshow{
    display: block !important;
}

.prosession-character .job-hover-list div{
    width: 100%;
    height: 42px;
    font-size: 12px;
    line-height: 12px;
    color: #99A0AB;
    padding: 15px;
    box-sizing: border-box;
}

.jobHoverChose{
    color: #1958FB !important;
}

.clean-chose{
    color: #646A7E;
    font-size: 12px;
    text-align: right;
    padding:16px 0;
    float: right;
    width: 126px;
    height: 44px;
}
</style>